<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <section class="container">
        <div class="search_box">
            <div class="search_header">
                <div class="submit_date_box rectangle_from">
                    <span style="margin-right:10px;width:80px;line-height:200%;">提交时间</span>
                    <el-config-provider :locale="locale">
                        <el-date-picker
                            v-model="value"
                            command="zh"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                            range-separator="至"
                            format="YYYY-MM-DD"
                            :locale="locale"
                        />
                    </el-config-provider>
                </div>
                <div class="order_state_box">
                    <span style="margin-right:10px;">订单状态</span>
                    <el-select v-model="selectVal" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.name"
                          :value="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search_footer">
                <div class="search_manual rectangle_from">
                    <span style="margin-right:16px;width:80px;line-height:200%;">手动搜索</span>
                    <el-input v-model="inp" placeholder="请输入订单号、用户账号、昵称" />
                </div>
                <div class="btn_box">
                    <el-row round>
                        <el-button>搜索</el-button>
                        <el-button plain type="success">重置</el-button>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="order_list_box">
            <div class="title">订单列表</div>
            <div class="table_box">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="max-width:1104px;"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column align="center" prop="order_num" label="订单编号" width="138">
                    <template #default="scope">{{ scope.row.order_num }}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="user_name" label="用户昵称" width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column align="center" prop="phone" label="手机号" width="138" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="course_name" label="课程名称" width="138" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="order_amount" label="订单金额" width="138" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="order_state" label="订单状态" width="148" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="submit_time" label="提交时间" width="148" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="operation" label="操作" width="100" show-overflow-tooltip>
                        <template #default="scope">
                            <div class="operation">
                                <div class="view" @click="view(scope)"><span>查看</span></div>
                                <div class="cancelOrDelete" @click="canOrDel(scope)"><span>
                                    {{ scope.row.operation.status }}
                                </span></div>
                            </div>
                          </template>
                    </el-table-column>
                </el-table>
                <div class="footer_operation">
                    <div class="l_box">
                        <el-checkbox v-model="checked1"  @change="toggleSelection" label="全选" size="large" />
                        <span class="batch_export">批量导出</span>
                    </div>
                    <div class="r_box">
                        <span>共10页,100数据</span>
                        <el-config-provider>
                            <el-pagination
                            v-model:current-page="currentPage3"
                            v-model:page-size="pageSize3"
                            small
                            :background="background"
                            layout="prev,pager,next,jumper,slot"
                            :total="1000"
                            hide-on-single-page>
                            </el-pagination>
                        </el-config-provider>
                        
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// eslint-disable-next-line no-unused-vars
let value = ref("")
let locale = ref(zhCn)
let selectVal = ref("")
let inp = ref("")
let options = ref([
    {name:"张三",},
    {name:"李四",},
    {name:"杨五",},
    {name:"马六",},
    {name:"陈七",},
    {name:"王八",}
])
let date = new Date();
let tableData = ref([
    {
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"待支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:"取消"}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:""}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:""}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已关闭",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:"删除"}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"待支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:"取消"}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:""}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:""}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:""}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"已关闭",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:"删除"}
    },{
    order_num:new Date().getTime(),
    user_name:`张三${parseInt(Math.random()*(1000+1)+1)}`,
    phone:`173${parseInt(Math.random()*(9000+3000)+3000)}`,
    course_name:"VUE3+TS",
    order_amount:"499",
    order_state:"待支付",
    submit_time:`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}`,
    operation:{status:"取消"}
    },
])
const pageSize3 = ref(10)
const currentPage3 = ref(1)
let background = ref(true)
let checked1 = ref(false)
const multipleTable = ref(null)
const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    tableData.value.forEach((row) => {
      multipleTable.value.toggleRowSelection(row,rows)
    })
  } else {
    multipleTable.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
//   checked1.value = val.length==10?true:false
    checked1.value = pageSize3.value == multipleSelection.value.length;
}
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
function view(e){
    console.log(e);
}
</script>

<style scoped lang="less">
.container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .search_box{
        font-size:16px;
        width: 100%;
        height: auto;
        background:white;
        margin-bottom:32px;
        box-sizing:border-box;
        padding:15px 15px;
        display:flex;
        flex-wrap:wrap;
        .rectangle_from{
            width:410px;
            display:flex;
            justify-content:space-between;
            margin-right:20px;
            overflow:hidden;
            margin-bottom:10px;
        }
        .search_header{
            display:flex;
            .order_state_box{
                width:300px;
            }
        }
        .search_footer{
            display:flex;
            .el-button{
                width:60px;
                height:30px;
                &:first-child{
                    background:#2bc17b;
                    color:white;
                }
                background:white;
                color:#2bc17b;
                border-color:#2bc17b;
            }
        }
        
    }
    .order_list_box{
        width: 100%;
        height: auto;
        box-sizing:border-box;
        padding:15px 15px;
        background:white;
        .title{
            margin-bottom:10px;
            width:1104px;
        }
        .table_box{
            width:1104px;
            height:575px;
            .operation{
                display:flex;
                justify-content:space-between;
            }
            .footer_operation{
                width:1104px;
                box-sizing:border-box;
                margin-top:20px;
                padding:0 10px;
                display:flex;
                justify-content:space-between;
                .l_box{
                    .batch_export{
                        color: rgba(43, 193, 123, 1);
                        font-size:14px;
                        margin-left:10px;
                        cursor: pointer;
                    }
                }
                .r_box{
                    font-size:14px;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    .demo-pagination-block + .demo-pagination-block {
                        margin-top: 10px;
                      }
                      .demo-pagination-block .demonstration {
                        margin-bottom: 16px;
                      }
                }
            }
            .view{
                cursor: pointer;
                color: rgba(43, 193, 123, 1);
            }
            .cancelOrDelete{
                cursor: pointer;
                color: rgba(251, 84, 81, 1);
            }
        }
    }
}

</style>